<template>
  <div class="main">
    <div class="body-left">
      <AwardCard :awardId="awardId"></AwardCard>
    </div>
    <div class="body-right">
      <div class="body-right-head">
        <el-descriptions
            class="margin-top"
            title="学生信息"
            :column="3"
            border
        >
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <user />
                </el-icon>
                姓名
              </div>
            </template>
            {{studentAwardForm.username}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                学号
              </div>
            </template>
            {{studentAwardForm.userNumber}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon :style="iconStyle">
                  <iphone />
                </el-icon>
                电话
              </div>
            </template>
            {{studentAwardForm.phone}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                <el-icon><Message /></el-icon>
                邮箱
              </div>
            </template>
            {{studentAwardForm.email}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                评定进度
              </div>
            </template>
            {{studentAwardForm.status}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">
                评定结果
              </div>
            </template>
            {{studentAwardForm.result}}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="body-right-body">
        <div class="file">
          <el-icon color="#409EFC"><Files /></el-icon>
          <a :href="studentAwardForm.fileUrl" target="_blank" style="text-decoration:none;">申请材料</a>
        </div>
      </div>
      <div class="body-right-foot">
        <el-form
            :model="studentAward"
            style="max-width: 600px"
            :inline="true"
        >
          <el-form-item label="更新进度">
            <el-select v-model="studentAwardForm.status" placeholder="选择评定进度">
              <el-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="更新结果">
            <el-select v-model="studentAwardForm.result"  placeholder="选择评定结果">
              <el-option
                  v-for="item in resultOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updateForm">更新</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import AwardCard from "../common/AwardCard.vue";
import {loadStudentAwardFormById, updateStudentAwardsByForm} from "../../api/studentAwards";
import {Files, Iphone, Message, User} from "@element-plus/icons-vue";

export default {
  name: "Examine",
  components: {Files, Message, Iphone, User, AwardCard},
  data() {
    return {
      studentAwardsId:this.$route.query.studentAwardsId,
      awardId:this.$route.query.awardId,
      labelPosition:'right',
      studentAward:{},
      studentAwardForm:{

      },
      form:{
        id:'',
        awardId:'',
        status:'',
        result:'',
        studentId:'',
      },
      statusOptions:[
        {
          value:'已申请',
          lable:'已申请',
        },
        {
          value:'已答辩',
          lable:'已答辩',
        },
        {
          value:'已出结果',
          lable:'已出结果',
        },
      ],
      resultOptions:[
        {
          value:'无结果',
          lable:'无结果',
        },
        {
          value:'未通过',
          lable:'未通过',
        },
        {
          value:'已通过',
          lable:'已通过',
        },
      ],
    };
  },
  created() {
      this.loadStudentAwardForm();
  },
  methods: {
    //加载奖项信息通过奖项Id
    loadStudentAwardForm(){
      loadStudentAwardFormById(this.studentAwardsId).then(response =>{
        this.studentAwardForm = response.data
      })
    },
    //更新奖项进度
    updateForm(){
      this.form.id = this.studentAwardForm.studentAwardsId;
      this.form.studentId = this.studentAwardForm.studentId;
      this.form.status = this.studentAwardForm.status;
      this.form.result = this.studentAwardForm.result;
      this.form.awardId = this.studentAwardForm.awardId;
      updateStudentAwardsByForm(this.form).then(
        this.$notify({
            title: '成功',
            message: "更新成功",
            type: 'success'
          })
      )
    }
  }
}

</script>
<style scoped>
.main{
  display: flex;
}
.body-left{
  margin-top: 80px;
  margin-left: 100px;
  margin-right: 30px;
}
.body-right {
  display: flex;
  flex-direction: column;
  margin-top: 80px;
}
.body-right-head {
  display: flex;
}
.body-right-body {
  margin-top: 30px;
  display: flex;
  margin-bottom: 80px;
}
.body-right-foot {
  display: flex;
}
.file {
  display: flex;
  justify-content: center;
  margin-left: 50px;
}
</style>
